<template>
    <movie-header-backup></movie-header-backup>
    <div id="background">
        <div id="intro-area" class="glass-card">
            <div id="intro-left">
                <div id="avatar" class="avatar-gradient shadow-lg border-4 border-white">{{ user.first_letter }}</div>
                <div @click="logout()" id="logout-btn" class="pretty-btn">登出</div>
            </div>
            <div id="intro-right">
                <div class="intro-block">
                    <span class="intro-label">用户名</span>
                    <span class="intro-value">{{ user.name }}</span>
                </div>
                <div class="intro-block">
                    <span class="intro-label">ID号</span>
                    <span class="intro-value">{{ user.id }}</span>
                </div>
                <div class="intro-block">
                    <span class="intro-label">性别</span>
                    <span class="intro-value">{{ user.gender }}</span>
                </div>
                <div class="intro-block">
                    <span class="intro-label">年龄</span>
                    <span class="intro-value">{{ user.age }}</span>
                </div>
            </div>
        </div>
        <div id="order-area">
            <div id="order-title-area">
                <span id="order-title">订单</span>
                <span id="more-order-btn" class="pretty-btn" @click="toOrderPage()">查看更多订单</span>
            </div>
            <div v-for="order in orders.arr" :key="order.orderId" class="order-card-wrap">
                <order-card v-bind="order"></order-card>
            </div>
        </div>  
    </div>

</template>

<script setup>
    import MovieHeaderBackup from './MovieHeaderBackup.vue';
    import OrderCard from './OrderCard.vue';
    import { reactive } from 'vue';
    import axios from 'axios';
    import router from '..';

    const user = reactive({
        id: 0,
        name: '',
        gender: 'M',
        age: 0,
        first_letter: ''
    });

    const orders = reactive({
        arr: []
    });

    async function fetchUser() {
        try {
            const response = await axios.post(`/user/getUserInfo`);
            if (response.data.code == 200) {
                const data = response.data.data;
                user.id = data.userId;
                user.name = data.userName;
                user.age = data.age;
                if (data.gender == 'M') {
                    user.gender = '男';
                } else {
                    user.gender = '女';
                }
                user.first_letter = user.name[0].toUpperCase();
                fetchOrder();
            } else {
                // 判定为没有登录，转到登录界面
                router.push("/login");
            }
        } catch (error) {
            console.log(error);
        }
    }

    async function fetchOrder() {
        try {
            const response = await axios.get(`/orders/${user.id}`);
            if (response.data.code == 200) {
                const allOrders = response.data.data;
                if (allOrders.length >= 1) {
                    orders.arr.push(allOrders[0]);
                }
                if (allOrders.length >= 2) {
                    orders.arr.push(allOrders[1]);
                }
            }
        } catch(error) {
            console.log(error);
        }
    }

    function logout() {
        const token = localStorage.getItem("jwt");
        try {
            // 登出
            axios.post("/doLogout", token);
            localStorage.setItem("jwt", "");
            // 跳到主页
            router.push("/")
        } catch (error) {
            console.log(error);
        }
    }

    function toOrderPage() {
        router.push("/order");
    }

    fetchUser();
</script>

<style scoped>
    #background {
        width: 100vw;
        min-height: 100vh;
        background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
        position: fixed;
        top: 0; left: 0;
        z-index: 0;
        overflow-y: auto;
        /* 背景模糊 */
        /* filter: blur(0.5px); */
    }
    .glass-card {
        background: rgba(255,255,255,0.25);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 24px;
        border: 1.5px solid rgba(255,255,255,0.25);
        margin: 40px auto 0 auto;
        width: 70%;
        display: flex;
        justify-content: center;
        padding: 32px 0;
    }
    #intro-left {
        margin-right: 70px;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #intro-right {
        border-left: 2px darkgray solid;
        padding-left: 70px;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #avatar {
        width: 100px;
        height: 100px;
        font-size: 3.5em;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        font-weight: bold;
        margin-bottom: 18px;
        transition: box-shadow 0.3s;
    }
    .avatar-gradient {
        background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
    }
    .shadow-lg {
        box-shadow: 0 4px 24px 0 rgba(0,0,0,0.18);
    }
    .intro-block {
        width: 100%;
        text-align: left;
        margin-bottom: 28px;
        font-size: 1.3em;
        display: flex;
        align-items: center;
    }
    .intro-label {
        display: inline-block;
        width: 100px;
        font-weight: bolder;
        color: #7b2ff2;
        font-size: 1.1em;
    }
    .intro-value {
        color: #222;
        font-size: 1.2em;
        font-weight: 500;
        margin-left: 10px;
    }
    #logout-btn {
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }
    .pretty-btn {
        background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%);
        color: #fff;
        border: none;
        border-radius: 16px;
        padding: 10px 28px;
        font-size: 1.1em;
        font-weight: bold;
        box-shadow: 0 2px 8px 0 rgba(160, 140, 209, 0.18);
        cursor: pointer;
        transition: background 0.3s, transform 0.2s;
        margin-top: 10px;
    }
    .pretty-btn:hover {
        background: linear-gradient(90deg, #fbc2eb 0%, #a18cd1 100%);
        transform: translateY(-2px) scale(1.05);
    }
    #order-area {
        width: 70%;
        margin: 0 auto;
        margin-top: 30px;
    }
    #order-title-area {
        height: 60px;
        color: #7b2ff2;
        font-size: 1.5em;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
    }
    #order-title {
        font-size: 1.3em;
        font-weight: bold;
    }
    #more-order-btn {
        font-size: 1em;
        margin-left: 20px;
    }
    .order-card-wrap {
        background: rgba(255,255,255,0.7);
        border-radius: 18px;
        box-shadow: 0 2px 12px 0 rgba(160, 140, 209, 0.10);
        margin-bottom: 24px;
        padding: 18px 12px 6px 12px;
    }
    .card-container {
        margin-bottom: 0;
    }
</style>